import 'package:cbec_app/components/base/base_image.dart';
import 'package:cbec_app/components/base/base_image_upload.dart';
import 'package:cbec_app/components/base/base_interactive.dart';
import 'package:cbec_app/components/common/common_style.dart';
import 'package:cbec_app/pages/my/controller/after_pop_ctr.dart';
import 'package:cbec_app/utils/Tools.dart';
import 'package:flutter/material.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:get/get.dart';
import 'package:wechat_assets_picker/wechat_assets_picker.dart';

// 问题凭证与描述的弹窗
class QuestionDescriptPopup extends StatefulWidget {
  const QuestionDescriptPopup({super.key});

  @override
  State<QuestionDescriptPopup> createState() => _QuestionDescriptPopupState();
}

class _QuestionDescriptPopupState extends State<QuestionDescriptPopup> {
  @override
  Widget build(BuildContext context) {
    return GetBuilder<AfterPopController>(builder: (controller) {
      return Container(
        width: double.infinity,
        padding: EdgeInsets.all(18.w),
        decoration: border_radis(Colors.white),
        child: SingleChildScrollView(
          // 包裹整个Column，支持滚动
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                alignment: Alignment.center,
                child: Text("上传凭证与描述", style: setTextStyle(15, FontWeight.w500, Tools.fromHex("#333333"))),
              ),
              SizedBox(height: 22.h),
              Text("问题描述", style: setTextStyle(15, FontWeight.w500, Tools.fromHex("#333333"))),
              SizedBox(height: 10.h),
              Container(
                decoration: border_radis(Tools.fromHex("#F8F8F8")),
                padding: EdgeInsets.all(10.w),
                child: TextFormField(
                  decoration: descript("请描述你的问题"),
                  controller: controller.reasonTxtCtr,
                  maxLines: 3,
                ),
              ),
              SizedBox(height: 10.h),
              Text("上传凭证(最多9张)", style: setTextStyle(15, FontWeight.w500, Tools.fromHex("#333333"))),
              SizedBox(height: 10.h),
              Container(
                child: Wrap(
                  spacing: 5.w,
                  runSpacing: 5.w,
                  children: [
                    for (var item in controller.imageList!.take(9)) // 限制最多9个元素
                      ImageItem(item: item),
                    if (controller.imageList!.length < 9) cameraButton(),
                  ],
                ),
              ),
              // SizedBox(height: 75.h), // 给底部留出空间，避免按钮遮挡
              solidButton("确认", () {
                controller.submitReason();
              })
            ],
          ),
        ),
      );
    });
  }

  Widget cameraButton() {
    final AfterPopController controller = Get.put(AfterPopController());

    return BaseInteractive(
      onClick: () {
        showModalBottomSheet(
          backgroundColor: Colors.transparent,
          context: context,
          builder: (BuildContext context) {
            return Container(
              padding: EdgeInsets.only(left: 8.w, right: 8.w),
              height: 180.h, // 可根据需要调整
              child: Column(
                children: <Widget>[
                  BaseInteractive(
                      onClick: () {
                        controller.upload(context);
                      },
                      childWidget: Container(
                          decoration: const BoxDecoration(
                              color: Colors.white,
                              borderRadius: BorderRadius.only(
                                topLeft: Radius.circular(20.0),
                                topRight: Radius.circular(20.0),
                              )),
                          alignment: Alignment.center,
                          width: double.infinity,
                          height: 50.h,
                          child: Text("拍照", style: TextStyle(fontSize: 15, fontWeight: FontWeight.w700, color: Tools.fromHex("#4D87FF"))))),
                  BaseInteractive(
                      onClick: () async {
                        if (controller.imageList!.isEmpty) {
                          controller.imageList = await AssetPicker.pickAssets(context);
                        } else {
                          controller.imageList!.addAll((await AssetPicker.pickAssets(context, pickerConfig: AssetPickerConfig(maxAssets: 9 - controller.imageList!.length))) as Iterable<AssetEntity>);
                        }
                        controller.update();
                        Get.back();
                      },
                      childWidget: Container(
                          decoration: BoxDecoration(
                            color: Colors.white,
                            borderRadius: const BorderRadius.only(
                              bottomLeft: Radius.circular(20.0),
                              bottomRight: Radius.circular(20.0),
                            ),
                            border: Border(
                              top: BorderSide(
                                color: Tools.fromHex("#D7D7D7"),
                                width: 1.0,
                              ),
                            ),
                          ),
                          alignment: Alignment.center,
                          width: double.infinity,
                          height: 50.h,
                          child: Text("从相册选择", style: TextStyle(fontSize: 15, fontWeight: FontWeight.w700, color: Tools.fromHex("#4D87FF"))))),
                  BaseInteractive(onClick: () => {Get.back()}, childWidget: Container(decoration: border_radis(Colors.white, radiusValue: 20), margin: EdgeInsets.only(top: 10.w), alignment: Alignment.center, width: double.infinity, height: 50.h, child: Text("取消", style: TextStyle(fontSize: 15, fontWeight: FontWeight.w700, color: Tools.fromHex("#4D87FF"))))),
                ],
              ),
            );
          },
        );
      },
      childWidget: Container(
        decoration: border_radis(Colors.white, borderColor: Tools.fromHex("#F7F7F7")),
        width: 60.w,
        height: 60.w,
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [BaseImage(url: "comment_camera.png", width: 24, height: 24), SizedBox(height: 5.h), Text("添加视频/图", style: setTextStyle(10, FontWeight.w500, Tools.fromHex("#666666")))],
        ),
      ),
    );
  }
}

/// 弹窗方法
void questionDescriptPopup(context) {
  showModalBottomSheet(
    context: context,
    builder: (BuildContext context) {
      return QuestionDescriptPopup();
    },
  );
}

class ImageItem extends StatelessWidget {
  final AssetEntity item;
  final AfterPopController controller = Get.find<AfterPopController>();
  ImageItem({
    super.key,
    required this.item,
  });

  @override
  Widget build(BuildContext context) {
    return Container(
      alignment: Alignment.center,
      width: 60.w,
      height: 60.w,
      child: Stack(
        children: [
          Positioned(
              child: Container(
            color: Colors.grey,
            width: 95.w,
            height: 95.w,
            child: AssetEntityImage(item, width: 55.w, height: 55.w, isOriginal: true),
          )),
          Positioned(
              top: 0,
              right: 0,
              child: BaseInteractive(
                onClick: () {
                  controller.imageList!.removeAt(controller.imageList!.indexOf(item));
                  controller.update();
                },
                childWidget: const Icon(Icons.close, color: Colors.white, size: 16),
              ))
        ],
      ),
    );
  }
}
